<script type="text/javascript">
  $().ready(function() {
    remove_cat();
    $("#sel_category_form").validate({
      rules: {
        "category_id": {
          required: true
        }
      },
      messages:{
        "category_id": {
          required: "点击下面链接,选择课程分类."
        }
      },
      errorPlacement: function(error, element) {
        $("#message_box").show();
      }
    });
  });
  function  append_node_data(node_id,text){
    $("#select_cat").show();
    $("#message_box").hide();
    var inner_html = "<span>"+text+"</span>"
    $("#inner_html").html(inner_html);
    $("#category_id")[0].setAttribute("value", node_id);
  }
  
  function  remove_cat(){
    $("#select_cat").hide();
    $("#category_id")[0].setAttribute("value", "");
  }
</script>
<div id="categories">
  <div class="sub_pannel">
    <div class="content">
      <div class="title">
        <span class="text">
          创建新课程 步骤一
        </span>
      </div>
      <div class="categories">
        <h5 style="color:#9B9EA0;">选择课程分类</h5>
        <div id="message_box">
          <div class="hint_message">点击下面链接,选择课程分类.</div>
        </div>
        <%form_tag  new_course_path ,:id=>'sel_category_form' do%>
          <%=hidden_field_tag :category_id%>
          <dl>
            <%@root_nodes.each do |root|%>
              <dt><h6><%= root.name %></h6></dt>
              <dd><%=display_children(root.direct_children) %></dd>
            <%end%>
          </dl>
          <div id="select_cat">
            <span class="close_x" onclick="remove_cat()">x</span>
            <p>你要创建的课程分类:</p>
            <div id="inner_html"></div>
          </div>
          <div class="p_submit">
            <%=submit_tag "下一步" ,:class=>"submit"%>
          </div>
        <%end%>
      </div>
    </div>
  </div>
</div>